<template>
    <view class="container" style="width: 100vw;height:100vh;">
        <view class="title" style="margin-top: 30px;">
            陈皮识别
        </view>
		
        
		
		<view style="margin: 30px 0;width: 90%">
		  <uni-row :gutter='10'>
		    <uni-col :span='12' v-for="item in baseList" :key="item.title">
		      <view style="margin-bottom: 5px; background-color: white; padding: 10px; border-radius: 10px;" @click="toShop(item)">
		        <image :src="item.url" mode="widthFix" style="width: 100%;" ></image>
		        <view class="lineEllipsis" style="text-align: center;" >{{ item.title }}</view>
		        
		      </view>
		    </uni-col>
		  </uni-row>
		</view>
		
    </view>
</template>

<script>
    export default {
        data() {
            return {
                baseList:[
                    {
                        url: '/static/imgs/新会陈皮（青皮）.jpg',
                        title: '天马三年'
                    },
                    {
                        url: '/static/imgs/新会陈皮（青皮）.jpg',
                        title: '天马五年'
                    },
                    {
                        url: '/static/imgs/新会陈皮（青皮）.jpg',
                        title: '天马十年'
                    },
                    {
                        url: '/static/imgs/新会陈皮（青皮）.jpg',
                        title: '茶坑三年'
                    },
                    {
                        url: '/static/imgs/新会陈皮（青皮）.jpg',
                        title: '茶坑八年'
                    },
                    {
                        url: '/static/imgs/新会陈皮（青皮）.jpg',
                        title: '东甲五年'
                    },
                    {
                        url: '/static/imgs/新会陈皮（青皮）.jpg',
                        title: '东甲七年'
                    },
                ]
            };
        },
        methods:{
            change(
                {
                    detail:{
                        index:i
                    },
                }
            ){
                console.log(i)
                uni.navigateTo({
                    url:"./upload" + "?title=" + this.baseList[i].title
                })  
            },
			toShop(item){
				console.log(item.title)
			    uni.showLoading({
			        title:"loading...",
			        success(){
			            setTimeout(()=>{
			                uni.$u.route('/pages/identify/upload', {
			                    ...item
			                });
			                uni.hideLoading();
			            },500)
			        },
			        fail(){
			            uni.hideLoading();
			        }
			    })
			},
			toPage(item){
				console.log(item.title)
				uni.navigateTo({
					
					url:'/pages/identify/upload'
				})
			}
        }
    }
</script>

<style lang="scss" scoped>
	.container{
	    width: 100vw;
	    min-height: 100vh;
	    overflow: auto;
	       @include flexBox(column,custom);
	    padding-bottom:50rpx;
	    background-color: #f3f4f6;
	}
	
    .title{
        width: 100vw;
        height: 20vh;
             @include flexBox();
        font-size: 60rpx;
        font-weight: bold;
        color: #ff6a00;
        // background-image: url("@/static/bgc_chi.png");
        position: relative;
        .imgbgc{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            height: 0;
            z-index: -1;
        }
    }
    .text {
    	font-size: 14px;
    	margin-top: 5px;
    }
            
    .example-body {
    	/* #ifndef APP-NVUE */
    	// display: block;
    	/* #endif */
    }
            
    .grid-dynamic-box {
    	margin-bottom: 15px;
    }
            
    .grid-item-box {
    	flex: 1;
    	// position: relative;
    	/* #ifndef APP-NVUE */
    	display: flex;
    	/* #endif */
    	flex-direction: column;
    	align-items: center;
    	justify-content: center;
    	padding: 15px 0;
    }
            
    .grid-item-box-row {
    	flex: 1;
    	// position: relative;
    	/* #ifndef APP-NVUE */
    	display: flex;
    	/* #endif */
    	flex-direction: row;
    	align-items: center;
    	justify-content: center;
    	padding: 15px 0;
    }
            
    .grid-dot {
    	position: absolute;
    	top: 5px;
    	right: 15px;
    }
            
    .swiper {
    	height: 420px;
    }
	
	.lineEllipsis {
		font-size: 15px;
		font-weight: bold;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		/* 超出几行省略 */
		overflow: hidden;
		}
</style>
